<template>
  <ShareCard :loading="isLoading" :cardData="cardData" :showTitle="showTitle">
    <template #title>
      <div> <Icon v-if="icon" :icon="icon" :size="26" class="mr-2" />{{ header }}</div>
    </template>
    <template v-if="dataSource?.length > 0">
      <div v-for="item in dataSource" :key="item.code" class="flex justify-between mb-2">
        <div
          class="overflow-hidden whitespace-nowrap overflow-ellipsis cursor-pointer"
          @click="handleLaunch(item)"
        >
          <Tooltip :title="item['name']">
            {{ item['name'] }}
          </Tooltip>
        </div>
      </div>
    </template>
    <template v-else>
      <Empty :image="simpleImage" />
    </template>
    <ProcessDrawer @register="registerDrawer" @success="handleSuccess" @show-view="handleView" />
  </ShareCard>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue';
  import { Card, Empty, Tooltip } from 'ant-design-vue';
  import { listDirByTypeCode, getFlowInit } from '/@/api/process/process';
  import { useGo } from '/@/hooks/web/usePage';
  import Icon from '/@/components/Icon/index';
  import { useDrawer } from '/@/components/Drawer';
  import ProcessDrawer from '/@/views/pages/processManagement/processDrawer.vue';

  import ShareCard from './ShareCard.vue';
  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

  const props = defineProps({
    loading: Boolean,
    header: {
      type: String as PropType<string>,
      default: '',
    },
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    icon: {
      type: String as PropType<string>,
      default: '',
    },
    pageSize: {
      type: Number,
      default: 6,
    },
    cardData: {
      type: Object as PropType<object>,
      default: () => {
        return {};
      },
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    flowTypeCode: {
      type: String as PropType<string>,
      default: '',
    },
  });

  const [registerDrawer, { openDrawer }] = useDrawer();

  //初始化流程myActionId
  const handleLaunch = async (item) => {
    await beginLaunch(item['code']);
  };

  let flowOpStyle = 0;
  const isLoading = ref(false);
  const dataSource = ref<Recordable>([]);
  const fetch = () => {
    isLoading.value = true;
    listDirByTypeCode({ pageSize: props.pageSize, typeCode: props.flowTypeCode })
      .then((res) => {
        console.log('listDirByTypeCode res', res);
        dataSource.value = res.list || [];
        flowOpStyle = res.flowOpStyle;
      })
      .finally(() => {
        isLoading.value = false;
      });
  };
  watch(
    () => props.pageSize,
    () => {
      fetch();
    },
    {
      immediate: true,
    },
  );
  const go = useGo();

  //发起流程
  const beginLaunch = (typeCode: string) => {
    return new Promise((resolve) => {
      let params = { typeCode: typeCode };
      getFlowInit(params)
        .then((res) => {
          let myActionId = res.myActionId || '';
          let type = res.type || 2; // 1为自由流程 2为固定流程
          let flowOpStyle = res.flowOpStyle;
          if (myActionId) {
            if (flowOpStyle == 1) {
              if (type === 2) {
                go({
                  path: '/processHandle',
                  query: {
                    myActionId: myActionId,
                    type: type,
                    isTab: true,
                  },
                });
              } else {
                go({
                  path: '/processHandleFree',
                  query: {
                    myActionId: myActionId,
                    type: type,
                    isTab: true,
                  },
                });
              }
            } else {
              openDrawer(true, {
                myActionId: myActionId,
                type: type,
              });
            }
          }
        })
        .finally(() => {
          resolve(true);
        });
    });
  };
</script>
